import React,{Suspense} from 'react'
import {BrowserRouter,HashRouter,Routes,Route,Navigate} from 'react-router-dom'
import routeList from './routerConfig'
import { RouteItem } from '../utils/type'
interface Props{
  
}
const Index = (props:Props) => {
  let {mode,routes}=routeList
  const rendeRoute=(arr:RouteItem[])=>{
    return arr&&arr.map((item,index)=>{
      return <Route key={index} path={item.path} element={item.to?<Navigate to={item.to}></Navigate>:<item.element></item.element>}>
        {
          item.children&&rendeRoute(item.children)
        }
      </Route>
    })
  }
  return (
    <Suspense>
      {
        mode=='history'?<BrowserRouter>
        <Routes>
          {
            rendeRoute(routes)
          }
        </Routes>
        
        </BrowserRouter>   :<HashRouter>
          <Routes>
            {
              rendeRoute(routes)
            }
          </Routes>
        </HashRouter>
      }
    </Suspense>
  )
}

export default Index
